<template>
	<view class="page">
		<u-sticky class="">
			<view class="nav-box">
				<view :class="i == 0 ? 'head-active' : ''" @click="i = 0">最新数据</view>
				<view :class="i == 1 ? 'head-active' : ''" @click="i = 1">历史数据</view>
			</view>
		</u-sticky>
	    <view v-show="i == 0" style="margin-top: 10rpx;"> 
			<uni-collapse ref="collapseView" accordion @change="collapseChange">
				<uni-collapse-item title-border="show" v-for="(item,index) in wuniTopList" :name="'' + index" :open="item.open">
					<template v-slot:title>
						<view class="collapse-title">
							<view class="" style="font-size: 30rpx;">{{item.datetime}}</view>
							<u-tag class="custom-tag" v-if="item.day" plain :text="item.day" borderColor="#f9ae3d" size="mini" color="#f9ae3d" bgColor="rgba(249,174,61,.1)"> </u-tag>
							<view class="collapse-title--right">
								<view class="v">{{item.niNum/1000}}<text class="unit">吨</text></view>
							</view>
						</view>
					</template>
					<view class="">
						<view class="collapse-content" v-for="day in dayList" @click="goDay(day)">
							<view class="collapse-content--top">
								<view class="">
									<text class="">{{day.myid}}</text>
									<text class="">（{{day.driver}})</text>
								</view>
								<view class="" style="text-align: right;">{{day.niNum/1000}}<text class="unit">吨</text></view>
							</view>
							<view class="collapse-content--bottom">
								<view class="collapse-content--center">{{day.destination}}</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
	    </view>
		<view class="" v-show="i == 1">
			<view class="head">
				<view class="head__top">
					<view class="head__top--left">
						<uni-icons type="calendar" size="20"></uni-icons>
						<view class="" style="margin-left: 10rpx;" @click="showMonth">{{month}}</view>
					</view>
					<view class="head__top--center">
						<picker @change="carcodeChange" :value="carcodeIndex" :range="carcodes">
							<view class="uni-input">{{carcodes[carcodeIndex]}}</view>
						</picker>
					</view>
					<view class="head__top--right">
						<picker @change="destinationChange" :value="index" :range="destination_list">
							<view class="uni-input">{{destination_list[index]}}</view>
						</picker>
					</view>
				</view>
				<view class="total">
					总计：<text class="value">{{total/1000}}</text>
					<text class="unit">吨</text>
				</view>
			</view>
			<u-datetime-picker
					:show="showDatePicker"
					v-model="dateValue"
					@close="showDatePicker = false"
					@confirm="confirmDate"
					cancelText=''
					mode="year-month"
					closeOnClickOverlay
			></u-datetime-picker>
			<view class="content">
				<view class="every-day" v-for="(item,index) in list" @click="goDay(item)">
					<u-gap bgColor="#eee" height="5" v-if="index != 0"></u-gap>
					<view class="every-day-content" hover-class="clickable">
						<view class="every-day-left" style="">
							<view class="every-day-datetime">{{item.datetime}}</view>
							<view class="every-day-destination" v-if="item.destination">{{item.destination}}</view>
						</view>
						<view class="every-day-right">
							<view class="value day-value">{{item.niNum/1000}}<text class="unit">吨</text></view>
							<view class="day-destination">{{item.myid}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import _custom from '../../../../common/_custom.js'
	import moment from 'moment'
	
	export default {
		components: {
			
		},
		data() {
			return {
				i: 0,
				today: {},
				yesterday: {},
				monthList: [],
				list: [],
				month: moment().format('YYYY-MM'),
				total: '',
				destination_list: [],
				carcodes: [],
				index: 0,
				carcodeIndex: 0,
				dateValue: moment().format('YYYY-MM'),
				showDatePicker: false,
				wuniTopList: [],
				dayList: [],
				isFirst: true,
			}
		},
		onLoad() {
			this.getMonthList()
			this.getWuNiDaySumCountTopTen()
		},
		onShow() {
			let that = this;
			uni.$on('wuni_month_list',function(data){
				if(data.length && Object.keys(data[0]).length == 0) {
					that.monthList = []
					return
				}
				let temp = [];
				let destinations = [];
				data.forEach(item => {
					if(temp.indexOf(item.myid) == -1) {
						temp.push(item.myid)
					}
					if(destinations.indexOf(item.destination) == -1) {
						destinations.push(item.destination)
					}
				})
				temp.unshift('车牌（全部）')
				destinations.unshift('目的地（全部）')
				that.carcodes = temp;
				let list = [];
				let total = 0;
				data.map(item => {
					if(that.carcodeIndex == 0) {
						list.push(item)
						total += (item.niNum * 1)
					} else if(item.myid == that.carcodes[that.carcodeIndex]){
						list.push(item)
						total += (item.niNum * 1)
					}
				})
				that.total = total
				for (let i = 0; i < list.length; i++) {
					for (let j = 0; j < list.length; j++) {
						if(moment(list[i].datetime) > moment(list[j].datetime)) {
							let temp = list[i];
							list[i] = list[j];
							list[j] = temp;
						}
					}
				}
				that.monthList = list;
				that.list = that.monthList;
				that.destination_list = destinations
			});
			uni.$on('wuni_new_month_list',function(data){
				if(data.length && Object.keys(data[0]).length) {
					that.dayList = data
				} else {
					that.dayList = []
				}
			});
			uni.$on('wuni_top10',function(data){
				that.wuniTopList = data;
				let today = moment()
				that.wuniTopList.forEach((item,index) => {
					let diff = moment().diff(item.datetime,'day')
					if(index == 0) {
						item.open = true
						if(diff == 0) {
							item.day = '今天'
							item.color = '#F9AE3D'
						} else {
							item.day = diff + '天前'
							item.color = '#3C9CFF'
						}
					}
				})
				if(that.isFirst) {
					that.collapseChange(0)
					that.isFirst = false;
				}
			});
		},
		onPullDownRefresh() {
			this.getMonthList()
		},
		methods: {
			getMonthList() {
				
				_custom.getDataJava({
					name: 'wuni_month_list',
					apiname: 'getWuNiCarDestDaySumCount',
					apiparam: {
						//临时参数
						// obscode:'WUDI',
						//2022-07有数据
						obsdate: this.month
					}
				})
			},
			getWuNiDaySumCountTopTen() {
				_custom.getDataJava({
					name: 'wuni_top10',
					apiname: 'getWuNiDaySumCountTop',
					apiparam: {
						//临时参数
						// obscode:'WUDI',
						top: 15
					}
				})
			},
			showMonth() {
				this.dateValue = this.month
				this.showDatePicker = true
			},
			confirmDate(v) {
				this.month = moment(v.value).format('YYYY-MM')
				this.index = 0
				this.carcodeIndex = 0
				this.getMonthList()
				this.showDatePicker = false
			},
			destinationChange(e) {
				this.index = e.detail.value
				this.dataFilter()
			},
			carcodeChange(e) {
				this.carcodeIndex = e.detail.value
				this.dataFilter()
			},
			dataFilter() {
				let carcode = this.carcodes[this.carcodeIndex];
				let destination = this.destination_list[this.index];
				let list = [];
				let total = 0;
				if(this.carcodeIndex == 0 && this.index == 0) {
					list = this.monthList
					this.monthList.forEach(item => {
						total += (item.niNum * 1)
					})
				} else if(this.carcodeIndex == 0 &&  this.index != 0) {
					this.monthList.forEach(item => {
						if(item.destination == this.destination_list[this.index]) {
							list.push(item)
							total += (item.niNum * 1)
						}
					})
				} else if(this.carcodeIndex != 0 &&  this.index == 0) {
					this.monthList.forEach(item => {
						if(item.myid == this.carcodes[this.carcodeIndex]) {
							list.push(item)
							total += (item.niNum * 1)
						}
					})
				} else {
					this.monthList.forEach(item => {
						if(item.myid == this.carcodes[this.carcodeIndex] && item.destination == this.destination_list[this.index]) {
							list.push(item)
							total += (item.niNum * 1)
						}
					})
				}
				this.list = list
				this.total = total
			},
			goDay(v) {
				uni.navigateTo({
					url: './day?data=' + JSON.stringify(v)
				})
			},
			collapseChange(v) {
				this.dayList = []
				if(v || typeof v == 'number') {
					let obsdate = this.wuniTopList[v].datetime;
					_custom.getDataJava({
						name: 'wuni_new_month_list',
						apiname: 'getWuNiCarDestDaySumCount',
						apiparam: {
							//临时参数
							// obscode:'WUDI',
							obsdate: obsdate
						}
					})
				}
				
			}
		}
	}
</script>

<style>
	.head-active {
		color: red;
	}
	
	.nav-box {
		background-image: linear-gradient(to right, #6AD7F8,#10AADC);
		color: #fff;
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.collapse-title {
		display: flex;
		height: 100rpx;
		padding: 0 20rpx;
		color: #000; 
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	
	.collapse-title--right > view {
		float: right;
	}
	
	.collapse-content {
		height: 120rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-shadow: 0 0 10rpx 1rpx rgba(0, 0, 0, .1);
		margin: 10rpx 20rpx;
	}
	
	.collapse-content > view {
		display: flex;
		justify-content: space-between;
		height: 60rpx;
	}
	
	.collapse-content--center {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.custom-tag {
		position: absolute;
		left: 200rpx;
		top: 28rpx;
	}
	
	.head {
		margin-bottom: 20rpx;
		position: fixed;
		top: 90rpx;
		/* #ifdef H5 */
		top: 175rpx;
		/* #endif */
		left: 0;
		z-index: 999;
		width: 100%;
		border-bottom: 1rpx solid #eee;
		box-shadow: 0 3rpx 3rpx rgba(0, 0, 0, .3);
	}
	
	.head__top {
		position: relative;
		display: flex;
		align-items: center;
		height: 100rpx;
		padding-left: 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}
	
	.head__top > view {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.head__top--left {
		display: flex;
		align-items: center;
	}
	
	.head__top--center {
		display: flex;
		justify-content: center;
		border-left: 1rpx solid #eee;
		border-right: 1rpx solid #eee;
	}
	
	.head__top--right {
		text-align: center;
	}
	
	.date {
		margin-left: 10rpx;
	}
	
	.unit {
		font-size: 20rpx;
		color: #aaa;
		margin-left: 10rpx;
	}
	
	.total {
		padding: 0 40rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
	}
	
	.content {
		margin-top: 220rpx; 
	}
	
	.every-day {
		background-color: #fff;
	}
	
	.every-day-content {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		padding: 20rpx;
	}
	
	.every-day-left {
		display: flex;
		flex-direction: column;
	}
	
	.every-day-datetime {
		font-size: 30rpx;
		flex: 1;
		display: flex;
		align-items: center;
	}
	
	.every-day-destination {
		flex: 1;
		font-size: 25rpx;
		color: #aaa;
	}
	
	.every-day-right {
		display: flex;
		flex-direction: column;
	}
	
	.day-value {
		font-size: 30rpx;
		flex: 1;
		display: flex;
		align-items: center;
	}
	
	.day-destination {
		flex: 1;
		font-size: 25rpx;
		color: #aaa;
	}
	
	.value {
		width: 120rpx;
		text-align: right;
		font-size: 32rpx;
		color: #48B1D9;
		font-weight: bold;
	}
	
	.v {
		text-align: right;
		font-size: 32rpx;
		font-weight: bold;
		color: #48B1D9;
	}
</style>
<style scoped>
	/deep/ .list-item .uni-list-item__content-title,/deep/.list-item  .container--right span {
		font-size: 15rpx;
	}
</style>